<template>
  <el-dialog title="新增部门" :visible="showDialog" @close="close">
    <el-form :model="formData" :rules="rules" label-width="120px">
      <el-form-item label="部门名称" prop="name" >
        <el-input v-model="formData.name" size="mini" style="width: 80%" placeholder="2-10个字符"></el-input>
      </el-form-item>

       <el-form-item label="部门编码"  prop="code" >
        <el-input v-model="formData.code"  size="mini" style="width: 80%" placeholder="2-10个字符"></el-input>
      </el-form-item>

       <el-form-item label="部门负责人" prop="managerId" >
        <el-select v-model="formData.managerId" size="mini" style="width: 80%" placeholder="请选择负责人"></el-select>
      </el-form-item>

       <el-form-item label="部门介绍"  prop="introduce" >
        <el-input v-model="formData.introduce" size="mini" style="width: 80%" type="textarea" placeholder="1-100个字符"></el-input>
      </el-form-item>
      
      <el-form-item>
        <!-- 按钮 -->
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-button size="mini" type="primary" >确定</el-button>
            <el-button size="mini" >取消</el-button>
          </el-col>
        </el-row>
      </el-form-item>
       
     
    </el-form>
  </el-dialog>
</template>

<script>
import {getDepartment} from "@/api/department"
export default {
  name: "AddDept",
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      formData: {
        code: "", // 部门编码
        introduce: "", // 部门介绍
        managerId: "", // 部门负责人id
        name: "", // 部门名称
        pid: "", // 父级部门的id
      },
      rules: {
        code: [{ required: true, message: '部门编码不能为空', trigger: 'blur' },
          {
            min: 2, max: 10, message: '部门编码的长度为2-10个字符', trigger: 'blur'
          },
          // 编码校验
          {
            trigger:'blur',
            validator:async(rule,value,callback)=>{
                // valu1就是输入的编码
                let result =await getDepartment()
                console.log(result);
                console.log(value);
                if(result.data.some(item => {return item.code === value})){
                  console.log(value);
                  callback(new Error('部门中已经有该编码了'))
                }else{
                  callback()
                }
            }
          }
        ], // 部门编码
        introduce: [{ required: true, message: '部门介绍不能为空', trigger: 'blur' }, {
          min: 1, max: 100, message: '部门介绍的长度为1-100个字符', trigger: 'blur'
        },
        
      ], // 部门介绍
        managerId: [{ required: true, message: '部门负责人不能为空', trigger: 'blur' }], // 部门负责人id
        name: [{ required: true, message: '部门名称不能为空', trigger: 'blur' },
          {
            min: 2, max: 10, message: '部门名称的长度为2-10个字符', trigger: 'blur'
          },
        // 名称校验
        {
            trigger:'blur',
            validator:async(rule,value,callback)=>{
                // valu1就是输入的编码
                let result =await getDepartment()
                console.log(result);
                console.log(value);
                if(result.data.some(item => {return item.name === value})){
                  callback(new Error('部门中已经有该名称了'))
                }else{
                  callback()
                }
            }
          }
        ] // 部门名称
        // pid: '' // 父级部门的id 不需要做校验
      }
    }
  },
  methods: {
    close() {
      // 向父组件传递变量改变值 .sync='showDialog' 修饰的
      this.$emit("update:showDialog", false);
    },
  },
};
</script>

<style>
</style>